<template>
  <div class="Login">
    <h2 style="padding-top: 60px;padding-left: 30px;font-size: 28px;">智慧医院便民平台</h2>
    <p style="padding-top: 10px;padding-left: 30px;">开启智慧医疗新时代</p>
    <div class="box">
      <div class="tab">
        <button @click="navigate('yan')" :style="{ color: activeButton === 'yan' ? 'blue' : 'black' }">验证码登录</button>
        &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
        <button @click="navigate('phone')" :style="{ color: activeButton === 'phone' ? 'blue' : 'black' }">密码登录</button>
        &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
        <button @click="navigate('face')" :style="{ color: activeButton === 'face' ? 'blue' : 'black' }">人脸登录</button>
      </div>
      <van-cell-group inset>
        <van-field v-model="phone" type="text" placeholder="请输入您的手机号码" />
        <van-field v-model="password" type="text" placeholder="请输入您的密码" style="padding-top: 18px;">
        </van-field>
        <p style="padding-left: 20px;padding-top: 10px;color:grey" @click="zhao">忘记密码</p>
        <van-button type="primary" block @click="login"
          style="margin-top: 40px;border-radius: 30px;width:92%;margin-left:10px;">登录</van-button>
      </van-cell-group>
      <p v-if="errorMessage" style="color: red;">{{ errorMessage }}</p>
      <p style="text-align: center;padding-top: 60px;">
        <van-icon name="wechat" size="1rem" />微信一键登录注册
      </p>
      <p style="padding-top: 80px;padding-left: 30px;display: flex; align-items: center;">
        <span><van-checkbox v-model="checked" icon-size="15px" is-link @click="showPopup"></van-checkbox></span>
        <span>我已阅读并同意</span>
        <span class="xie">隐私政策</span>
        <span class="xie">用户协议</span>
        <span>和</span>
        <span class="xie">平台协议</span>
      </p>
      <van-popup v-model:show="show" :style="{ padding: '64px', color: 'grey', paddingTop: '20px', fontSize: '17px' }">
        <h2 :style="{ color: 'black', paddingLeft: '60px' }">隐私声明</h2>
        <span>您需要同意</span>
        <span :style="{ color: 'black', fontWeight: '700' }">《隐私权政策》</span>
        <span>并完成注册后方可继续操作，请您充分阅读并接受全部内容后点击同意。</span><br />
        <span>
          &nbsp;&nbsp;请您仔细阅读《隐私权政策》。我们依据国家最新法规要求，更新了《隐私权政策》，特此向您说明如下:
        </span><br />
        1、为向您提供交易、服务、社区等相关功能或服务,我们会收集、使用您的必要信息;<br />
        2、摄像头、麦克风、相册、GPS等敏感权限均不会默认开启,只有经过您明示授权的前提下才会为实现某项功能或服务时使用<br />
        <p>
          <button @click="disagree"
            :style="{ border: 'none', background: 'none', paddingLeft: '90px', color: disagreeClicked ? 'red' : 'black' }">不同意</button>
          <button @click="agree"
            :style="{ border: 'none', background: 'none', paddingLeft: '30px', color: agreeClicked ? 'red' : 'black' }">同意</button>
        </p>
      </van-popup>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter()
import { Toast } from 'antd-mobile'
const checked = ref(false);
const disagreeClicked = ref(false);
const agreeClicked = ref(false);
// 按钮切换转换样式
const activeButton = ref('phone');
const navigate = (button) => {
  activeButton.value = button;
  if (button === 'yan') {
    router.push('/login')
  } else if (button === 'phone') {
    router.push('/phone')
  } else if (button === 'face') {
    router.push('/face')
  }
};
const setup = () => {
  return {
    activeButton,
    navigate,
  }
}
setup()
// 阅读协议
const show = ref(false);
const showPopup = () => {
  show.value = true;//显示弹窗
  agreeClicked.value = false;//重置按钮状态
  disagreeClicked.value = false;//重置按钮状态
};
const agree = () => {
  checked.value = true;//用户同意协议
  agreeClicked.value = true;//同意按钮被点击
  disagreeClicked.value = false;//重置按钮状态
  show.value = false;//隐藏弹窗
}
const disagree = () => {
  checked.value = false;//用户不同意协议
  disagreeClicked.value = true;//同意按钮被点击
  agreeClicked.value = false;//重置按钮状态
  show.value = false;//隐藏弹窗
}
// 手机号密码登录
const phone = ref('')
const password = ref('')
const errorMessage = ref('');
const login = async () => {
  // 校验协议是否勾选
  if (!checked.value) {
    Toast.show({
      content: '请阅读并同意协议',
      icon: 'fail',
    });
    return; // 结束函数，阻止继续执行
  }
  // 校验手机号格式
  let reg = /^1[3456789]\d{9}$/;
  if (phone.value === "") {
    Toast.show({
      content: "请输入手机号"
    });
    return;
  }
  if (!reg.test(phone.value)) {
    Toast.show({
      content: '手机号格式不正确'
    });
    return;
  }
  try {
    const response = await axios.post('http://127.0.0.1:3000/loginn', {
      phone: phone.value,
      password: password.value,
    });
    console.log(response);
    // 假设后端返回的响应格式为 { success: true, token: '...' }
    if (response.data.code === 200) {
      // 登录成功，存储 token 或其他信息
      sessionStorage.setItem('token', response.data.token);
      sessionStorage.setItem('userid', response.data.result._id);
      sessionStorage.setItem('user', JSON.stringify(response.data.result));
      localStorage.setItem('token', response.data.token);
      localStorage.setItem('user', JSON.stringify(response.data.result));
      console.log(response.data.result);
      // 可以跳转到其他页面
      router.push('/home');
    } else {
      errorMessage.value = response.data.Toast || '登录失败，请重试。';
    }
  } catch (error) {
    console.error(error);
    errorMessage.value = '网络错误，请稍后再试。';
  }
};

const zhao = () => {
  router.push('/zhao')
}
</script>

<style lang="scss" scoped>
.box {
  margin-top: 40px;
}

.tab {
  margin-left: 30px;
  margin-bottom: 40px;

  button {
    border: 0;
    background: none;
    color: black;
  }

  button .active {
    color: rgb(76, 138, 251);
  }
}

.xie {
  color: rgb(76, 138, 251);
  padding-left: 5px;
  padding-right: 5px;
}
</style>